<template>
  <ContentWrap>
    <div class="big_div">
      <div>
        <el-steps :active="active" finish-status="success">
          <el-step v-for="item in stepTitles" :key="item" :title="item" />
        </el-steps>
      </div>
      <div v-show="step1_content_show" class="step_content_div">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item :label="formItemLabel.company" prop="company">
            <el-input v-model="ruleForm.company" placeholder="请输入公司名称" />
          </el-form-item>
          <el-form-item :label="formItemLabel.number" prop="number">
            <el-input v-model="ruleForm.number" placeholder="请输入打款账号" />
          </el-form-item>
          <el-form-item :label="formItemLabel.cid" prop="cid">
            <el-select
              v-model="ruleForm.cid"
              placeholder="请选择商品"
              filterable
              @click="getCommodityList"
            >
              <el-option v-for="item in commodityList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="formItemLabel.count" prop="count">
            <el-input v-model.number="ruleForm.count" placeholder="请输入商品数量" />
          </el-form-item>
          <el-form-item :label="formItemLabel.phone" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入预留电话" />
          </el-form-item>
          <el-form-item :label="formItemLabel.description" prop="description">
            <el-input v-model="ruleForm.description" type="textarea" placeholder="请输入备注信息" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="next(ruleFormRef)">下一步</el-button>
            <!--<el-button type="primary" @click="submitForm(ruleFormRef)">
              Create
            </el-button>-->
            <!--<el-button @click="resetForm(ruleFormRef)">Reset</el-button>-->
          </el-form-item>
        </el-form>
      </div>
      <div v-show="step2_content_show" class="step_content_div">
        <el-form label-width="120px">
          <el-form-item :label="formItemLabel.company">
            <span>{{ ruleForm.company }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.number">
            <span>{{ ruleForm.number }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.cid">
            <span>{{ ruleForm.cname }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.count">
            <span>{{ ruleForm.count }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.phone">
            <span>{{ ruleForm.phone }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.description">
            <span>{{ ruleForm.description }}</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="previous">上一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="step3_content_show">
        <el-col>
          <el-result
            icon="success"
            title="申请提交成功！"
            sub-title=""
          >
            <template #extra>
              <el-button type="primary" @click="continueApply(ruleFormRef)">继续申请</el-button>
            </template>
          </el-result>
        </el-col>
      </div>
    </div>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { CommodityApi, CommodityVO } from '@/api/wms/commodity'
import { SaleApi, SaleVO } from '@/api/wms/sale'

const stepTitles = reactive(['填写申请信息', '确认开票信息', '完成申请'])

// 步骤条内容显示标志，每个步骤只能显示一个
const step1_content_show = ref(true)
const step2_content_show = ref(false)
const step3_content_show = ref(false)

const active = ref(1)
/** 下一步 */
const next = async (formEl: FormInstance | undefined) => {
  // 表单校验
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('next!')
      // 切换步骤内容
      active.value++
      if (active.value == 1) {
        step3_content_show.value = false
        step1_content_show.value = true
      }
      if (active.value == 2) {
        step1_content_show.value = false
        step2_content_show.value = true
      }

      // 通过cid获取cname商品名称，方便step2展示
      const filterArr = commodityList.value.filter(item => item.id === ruleForm.cid)
      ruleForm.cname = filterArr[0].name

    } else {
      console.log('error next!', fields)
    }
  })
}

// 表单项标签
const formItemLabel = reactive({
  company: '公司名称:',
  number: '打款账号:',
  cid: '售出商品:',
  count: '商品数量:',
  phone: '预留电话:',
  description: '备注信息:',
})

/** 上一步 */
const previous = () => {
  active.value--
  if (active.value == 1) {
    step2_content_show.value = false
    step1_content_show.value = true
  }
  if (active.value == 2) {
    step3_content_show.value = false
    step2_content_show.value = true
  }
}


interface RuleForm {
  company: string // 公司名称
  number: string // 打款账号
  cid: string // 售出商品
  cname: string // 售出商品名称
  count: number // 商品数量
  phone: string // 预留电话
  description: string // 备注信息
}

const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive<RuleForm>({
  company: '',
  number: '',
  cid: '',
  cname: '',
  count: 10,
  phone: '',
  description: '',
})

const rules = reactive<FormRules<RuleForm>>({
  company: [
    { required: true, message: '公司名称不能为空', trigger: 'blur' },
  ],
  number: [
    { required: true, message: '打款账号不能为空', trigger: 'blur' },
  ],
  cid: [
    { required: true, message: '售出商品不能为空', trigger: 'change' },
  ],
  count: [
    { required: true, message: '商品数量不能为空', trigger: 'blur' },
    {
      type: 'number',
      min: 1, // 这里设置最小值为 1
      message: '商品数量必须大于 0', // 统一提示信息
      trigger: 'blur'
    }
  ],
  phone: [
    { required: true, message: '预留电话不能为空', trigger: 'blur' },
    { min: 11, max: 11, message: '长度应为11位', trigger: 'blur' },
  ],
})

const submitForm = async () => {
  // 提交表单到后端接口
  console.log("提交数据：", ruleForm)
  // 校验表单
  // await ruleFormRef.value.validate()
  try {
    await SaleApi.createSale(ruleForm as unknown as SaleVO)
    // 切换到下一步，这边就是最后一步，即完成申请
    active.value = 3
    step2_content_show.value = false
    step3_content_show.value = true
  } finally {
  }
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

/** 按钮事件-继续申请 */
const continueApply = (formEl: FormInstance | undefined) => {
  // 切换步骤内容
  active.value = 1
  step3_content_show.value = false
  step1_content_show.value = true

  // 清空表单内容
  resetForm(formEl)
}

/** 获取“售出商品”选择器数据 */
const commodityList = ref<CommodityVO[]>([])
const getCommodityList = async () => {
  const data = await CommodityApi.getCommodityList()
  // console.log(data)
  commodityList.value = data
}

/** 钩子函数 */
onMounted(() => {
  getCommodityList()
})
</script>

<style lang="scss">

.big_div {
  margin-left: 180px;
  margin-right: 180px;
  margin-top: 40px;
  margin-bottom: 40px
}

.step_content_div {
  margin-left: 120px;
  margin-right: 120px;
  margin-top: 40px;
  margin-bottom: 40px
}

</style>


